﻿@{
    ViewBag.Title = "JQuerySlider";
}
<h2>
    JQuerySlider</h2>
<link href="@Url.Content("~/Content/JQuerySlider.css")" rel="stylesheet" type="text/css" />
@* "Alte Slider Funktionen" weiter unten Refacotring betrieben *@
 @*<script>
                                                                        //Muss ich so aufrufen, da sonst die Imagegröße der Bilder noch nicht zur Verfügung stand bzw. 0 war.
                                                                        $(window).load(function () {
                                                                            (function ($) {
                                                                                var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'), //slider sichtbar machen
                imgs = sliderUL.find('img'),
                imgWidth = imgs[0].width, //600
                imgLen = imgs.length, //4
                current = 1,
                totalImgsWidth = (imgLen - 1) * imgWidth;

                                                                                $('#slider-nav').show().find('button').on('click', function () {
                                                                                    var direction = $(this).data('dir'),
                    location = imgWidth; //600

                                                                                    //update Current value
                                                                                    (direction === 'next') ? ++current : --current;

                                                                                    //if First Image
                                                                                    if (current === 0) {
                                                                                        current = imgLen;
                                                                                        location = totalImgsWidth;
                                                                                        direction = 'next';
                                                                                    } else if (current - 1 === imgLen) { //are we at end? 
                                                                                        current = 1;
                                                                                        location = 0;
                                                                                    }

                                                                                    transition(sliderUL, location, direction);

                                                                                });

                                                                                function transition(container, location, direction) {
                                                                                    var unit; // -= += (nicht initialisiert kann also null sein)

                                                                                    //festlegen um welche Richtung es sich handelt.
                                                                                    if (direction && location !== 0) {
                                                                                        unit = (direction === 'next') ? '-=' : '+=';
                                                                                    }

                                                                                    container.animate({
                                                                                        //da unit auch null sein kann hier nochmal mit ? prüfen was gesetzt werden soll
                                                                                        'margin-left': unit ? (unit + location) : location // +=600 oder -=600 oder 0
                                                                                    });
                                                                                }

                                                                            })(jQuery);
                                                                        });
</script>*@
<section id="main2">
    <div id="sliderMain">
        <div class="slider">
            <ul>
                <li>
                <img src="/img/img1.gif" alt="image">
                <div>
                    Hsllo Welt
                    </div></li>
                <li>
                    <img src="/img/img2.gif" alt="image"></li>
                <li>
                    <img src="/img/img3.gif" alt="image"></li>
                <li>
                    <img src="/img/img4.gif" alt="image"></li>
            </ul>
        </div>
        <div id="slider-nav">
            <button data-dir="prev">
                Previous</button>
            <button data-dir="next">
                Next</button>
        </div>
    </div>
</section>
<script>
    function Slider(container, nav) {
        this.container = container;
        this.nav = nav.show();
        this.imgs = this.container.find('img');
        this.imgWidth = this.imgs[0].width; //600
        this.imgsLen = this.imgs.length;
        this.current = 0;

        this.events.click.call(this);
    }

    //Mann könnte die Funktion transition auch in unserer MainFunktion des Sliders ablegen, nur dann würde diese jedes mal 
    //mit erstellt wenn wir eine Instanz des SLiders erstellen. Mit der Prototype Methode ist es möglich auf ein und die Selbe 
    //Funktion zuzugreifen ohne das diese jedes mal "neu" angelegt werden muss und Speicher benötigt
    Slider.prototype.transition = function (coords) {
        this.container.animate({
            //wenn coords ist nicht "null" dann werden die koordinaten genommen, sonst wird es berechnet
            'margin-left': coords || -(this.current * this.imgWidth)
        });
    };

    Slider.prototype.setCurrentPosition = function (direction) {
        var pos = this.current;
        //Kurzform, mit der doppel ~~ kann mann einen Bool in einen Int umwandeln 0 oder 1
        //this.current += (~~(direction === 'next') || -1);
        (direction === 'next') ? pos++ : pos--;
        this.current = (pos < 0) ? this.imgsLen - 1 : pos % this.imgsLen;
    };

    Slider.prototype.events = {
        click: function () {
            var self = this; //unser Slider Objekt "merken", da im Klick event wieder der Button this ist!
            this.nav.find('button').on('click', function () {
                //das This hier drin bezieht sich wieder auf den Button der geklickt wurde
                self.setCurrentPosition($(this).data('dir'));
                self.transition();
            });
        }
    };

    $(window).load(function () {
        var container = $('div.slider').css('overflow', 'hidden').children('ul'),
          slider = new Slider(container, $('#slider-nav'));
    });
</script>
